<template>
  <div style="width: auto; height: 270px" id="echarts3"></div>
</template>

<script>
import * as echarts from "echarts";
import { listEcharts5 } from "@/api/echarts/echarts";

const colors = ["#5470C6", "#EE6666"];

export default {
  name: "echarts3",
  data() {
    return {
      option: {
        title: {
          text: "疑点核实分布图",
          textStyle: {
            color: "#FFFFFF",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: (params) => {
            let tooltipHtml = `<div>`;
            params.forEach((param) => {
              tooltipHtml += `<div><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${param.color};"></span>${param.seriesName}: ${param.value}</div>`;
            });
            tooltipHtml += `</div>`;
            return tooltipHtml;
          },
        },
        legend: {
          data: ["疑点数据", "下发工单数", "问题数据"],
          selected: {
            疑点数据: true,
            下发工单数: false,
            问题数据: false,
          },
          textStyle: {
            color: "#FFFFFF",
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "疑点数据",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [],
          },
          {
            name: "下发工单数",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [],
          },
          {
            name: "问题数据",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.echartsInit();
    this.getList3();
  },
  methods: {
    echartsInit() {
      const chart = echarts.init(document.getElementById("echarts3"));
      chart.setOption(this.option);

      // 添加图例点击事件处理程序
      chart.on("legendselectchanged", (params) => {
        const selected = params.selected;
        Object.keys(selected).forEach((key) => {
          if (key !== params.name) {
            selected[key] = false;
          }
        });
        this.option.legend.selected = selected;
        chart.setOption(this.option);
      });

      // 添加点击事件处理程序
      chart.on("click", (params) => {
        console.log("点击的数据点信息-----------：", params);
        if (params.componentType === "series") {
          const type = params.seriesName;
          const month = params.name;
          this.navigateToPage(type, month);
        }
      });
    },
    navigateToPage(type, month) {
      // 根据 type 跳转到指定页面
      switch (type) {
        case "疑点数据":
          this.$router.push({
            path: "../executionhistory/executionHistory",
            query: { month: month },
          });
          break;
        case "下发工单数":
          this.$router.push({
            path: "../orderhistory/orderHistory",
            query: { month: month },
          });
          break;
        case "问题数据":
          this.$router.push({
            path: "../orderhistory/orderHistory",
            query: { month: month },
          });
          break;
        default:
          console.log("未知类型");
      }
    },
    getList3() {
      this.loading = true;
      listEcharts5().then((response) => {
        const data = response;
        const months = data.map((item) => item.month);
        const doubtCounts = data.map((item) => item.doubtCount);
        const orderCounts = data.map((item) => item.orderCount);
        const questionCounts = data.map((item) => item.questionCount);

        this.option.xAxis[0].data = months;
        this.option.series[0].data = doubtCounts;
        this.option.series[1].data = orderCounts;
        this.option.series[2].data = questionCounts;

        // 重新初始化图表
        this.echartsInit();

        this.loading = false;
      });
    },
  },
};
</script>

<style scoped></style>
